<template>
  <div id="nav" v-touch:right="onSwipeRight">
    <div class="login" v-if="false">
    <!-- <div class="login" v-if="!isLogin"> -->
      <login></login>
    </div>
    <div class="index" v-else>
      <router-view/>
      <!-- <router-view name="Calendar" v-if="selectedIcon === 'calendar'"></router-view> -->
      <!-- <router-view name="Wallet" v-if="selectedIcon === 'wallet'"></router-view> -->
      <!-- <router-view name="Chart" v-if="selectedIcon === 'chart'"></router-view> -->
      <!-- <router-view name="Personal" v-if="selectedIcon === 'personal'"></router-view> -->
      <footer-tabs v-if="showRoute.includes(route.name as string) && footerVisible"></footer-tabs>
      <mutiple-bill-operate v-if="!footerVisible"></mutiple-bill-operate>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue'
import FooterTabs from './components/common/FooterTabs.vue'
import { useStore } from 'vuex'
import Login from './views/personal/login.vue'
import { useRoute, useRouter } from 'vue-router'
import MutipleBillOperate from './components/bill/MutipleBillOperate.vue'
export default defineComponent({
  name: 'App',
  components: {
    FooterTabs,
    Login,
    MutipleBillOperate
  },
  setup() {
    const router = useRouter()
    const route = useRoute()
    const store = useStore()
    const isLogin = computed(() => store.state.isLogin)
    const footerVisible = computed(() => store.state.footerVisible)
    const showRoute = ['Home', 'Calendar', 'Wallet', 'Chart', 'Personal']
    // 获取状态栏高度
    const getStatuBarHeight = () => {
      console.log(window.navigator.geolocation, '40');
    }
    const onSwipeRight = () => {
      console.log('触发右滑函数');
      router.go(-1)
    }
    getStatuBarHeight()
    return {
      isLogin,
      route,
      showRoute,
      footerVisible,
      onSwipeRight
    }
  }
})
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  font-family: '小星星';
}

#nav {
  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
.van-toast {
  box-shadow: 1px 7px 14px -5px rgba(0,0,0,0.2);
  border-radius: 0 6px 6px 0 !important;
  background-color: #fff !important;
  border-left: red 2px solid;
  color: #333 !important;
  width: auto !important;
  flex-direction: row !important;
  min-height: auto !important;
}
.van-popup--center {
  top: 40% !important;
}
.van-toast__text {
  margin-top: 0 !important;
  margin-left: 10px;
}
.van-popover--light .van-popover__content {
  padding: 10px;
}
</style>
